<template>
	<div>
		<div class="layout-breadcrumb">
			<Breadcrumb>
			    <BreadcrumbItem to="/">首页</BreadcrumbItem>
			    <BreadcrumbItem href="">系统配置</BreadcrumbItem>
			    <BreadcrumbItem href="">短信</BreadcrumbItem>
			    <BreadcrumbItem href="/config/sms/set">设置</BreadcrumbItem>
			</Breadcrumb>
		</div>
		<div class="layout-content">
		    <div class="layout-content-main">
				<Form :model="form" ref="form" :label-width="160" :rules="formRule" >
			        <FormItem prop="sms" label="系统短信服务商选择">
			            <Select v-model="form.sms">
							<Option v-for="service in services" :value="service.id" :key="service.id">{{service.name}}</Option>
					    </Select>
			        </FormItem>
			        <FormItem v-show="form.sms == 'juhe' " prop="sms_account_juhe" label="账户配置值" >
			            <Input v-model="form.sms_account_juhe" size="large" placeholder="账户配置值" clearable />
			        </FormItem>
					<FormItem v-show="form.sms == 'dayu' " prop="sms_account_dayu_accesskeyid" label="accessKeyId" >
			            <Input v-model="form.sms_account_dayu_accesskeyid" size="large" placeholder="accessKeyId" clearable />
			        </FormItem>
					<FormItem v-show="form.sms == 'dayu' " prop="sms_account_dayu_accesskeysecret" label="accessKeySecret" >
			            <Input v-model="form.sms_account_dayu_accesskeysecret" size="large" placeholder="accessKeySecret" clearable />
			        </FormItem>
			        <FormItem v-show="form.sms == 'dayu' " prop="sms_account_dayu_signname" label="短信签名" >
			            <Input v-model="form.sms_account_dayu_signname" size="large" placeholder="短信签名" clearable />
			        </FormItem>
			        <FormItem>
			            <Button v-show="$store.getters.per.config_sms_set_update" type="primary" @click="handleSubmit('form')" :loading="loading">保存</Button>
			        </FormItem>
			    </Form>
		    </div>
		</div>
	</div>
</template>
<style>
    .spin-icon-load{animation: ani-demo-spin 1s linear infinite; }
</style>
<script>
	import {Button,Breadcrumb,Form,Input, Select, Option,Icon} from 'iview';

	export default	{
		components :{
			Breadcrumb,
        	'BreadcrumbItem' : Breadcrumb.Item,
        	Select,
        	Option,
        	Input,
			Form,
		 	'FormItem' :Form.Item,
			Button,
			Icon,
		},
		data () {
			const validateJuheEmpty = (rule, value, callback) => {
				if(this.form.sms=='juhe'){
					if(this.form.sms_account_juhe==''){
						callback('服务商参数未填写完整');
					}
				}
				callback();
			};
			const validateDayuAKEmpty = (rule, value, callback) => {
				if(this.form.sms=='dayu'){
					if(this.form.sms_account_dayu_accesskeyid==''){
						callback('服务商参数未填写完整');
					}
				}
				callback();
			};
			const validateDayuAKSEmpty = (rule, value, callback) => {
				if(this.form.sms=='dayu'){
					if(this.form.sms_account_dayu_accesskeysecret==''){
						callback('服务商参数未填写完整');
					}
				}
				callback();
			};
			const validateDayuSignNameEmpty = (rule, value, callback) => {
				if(this.form.sms=='dayu'){
					if(this.form.sms_account_dayu_signname==''){
						callback('服务商参数未填写完整');
					}
				}
				callback();
			};
			return {
				loading :false,
				form :{
	            	sms  : '',
	            	sms_account_juhe : '',
	            	sms_account_dayu_accesskeyid : '',
	            	sms_account_dayu_accesskeysecret : '',
	            	sms_account_dayu_signname : '',
	            },
	            formRule : {
	                sms: [
	                    { required: true, message: '请选择一个系统短信服务商', trigger: 'blur' },
	                ],
	                sms_account_juhe :[
	                	{ validator: validateJuheEmpty, trigger: 'blur' }
	                ],
	                sms_account_dayu_accesskeyid :[
	                	{ validator: validateDayuAKEmpty, trigger: 'blur' }
	                ],
	                sms_account_dayu_accesskeysecret :[
	                	{ validator: validateDayuAKSEmpty, trigger: 'blur' }
	                ],
	                sms_account_dayu_signname :[
	                	{ validator: validateDayuSignNameEmpty, trigger: 'blur' }
	                ],
	            },
	            services :[
	            	{id : 'juhe',name:'聚合短信'},
	            	{id : 'dayu',name:'大于短信'},
	            ]
			}
		},
		methods :{
			handleSubmit(name){
				this.loading = true
				this.$refs[name].validate(valid => {
	    			if (!valid) {this.loading=false;return false;}
	    			this.Axios.Config.Sms.Set.Update(this.form)
					.then(res =>{
						if(!res) return false;
						if(res.code==0) this.loading=false;
		            });
	    		})
			}
		},
		beforeMount : function(){
			this.$Spin.show({
                render: (h) => {
                    return h('div', [
                        h(Icon, {
                        	'class': 'spin-icon-load',
                            props: {
                                type: 'ios-loading',
                                size: 18
                            }
                        }),
                        h('div', 'Loading')
                    ])
                }
            });
			this.Axios.Config.Sms.Set.Get('sms')
			.then(res =>{
				if(!res) return false;
				this.form.sms = res.data ?  res.data[0].vue : '';
            });
			this.Axios.Config.Sms.Set.Get('sms_account_juhe')
			.then(res =>{
				if(!res) return false;
				this.form.sms_account_juhe =  res.data[0] ? res.data[0].vue : '';
            });
            this.Axios.Config.Sms.Set.Get('sms_account_dayu_accesskeyid')
			.then(res =>{
				if(!res) return false;
				this.form.sms_account_dayu_accesskeyid =  res.data[0] ? res.data[0].vue : '';
            });
            this.Axios.Config.Sms.Set.Get('sms_account_dayu_accesskeysecret')
			.then(res =>{
				if(!res) return false;
				this.form.sms_account_dayu_accesskeysecret =  res.data[0] ? res.data[0].vue : '';
            });
            this.Axios.Config.Sms.Set.Get('sms_account_dayu_signname')
			.then(res =>{
				if(!res) return false;
				this.form.sms_account_dayu_signname =  res.data[0] ? res.data[0].vue : '';
            });
		},
		mounted : function(){
			var _this  = this;
			setTimeout(function(){
				_this.$Spin.hide();
			},2000)
			this.$store.dispatch('CHANGE_ROUTE',{name:'短信服务商设置',route:'/config/sms/set',action:1,closable:true});
		},
	}
</script>
